<template>
  <div>
    <!-- <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      ref="treeRef"
      @check-change="handleCheckChange"
    ></el-tree> -->
    <Table></Table>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElTree } from 'element-plus';
import Table from '@/components/HelloWorld.vue'
export default {
  components: {
    ElTree,
    Table
  },
  setup() {
    const treeRef = ref(null);

    const data = [
      {
        id: 1,
        label: '一级 1',
        children: [
          {
            id: 4,
            label: '二级 1-1',
            children: [
              {
                id: 9,
                label: '三级 1-1-1',
              },
              {
                id: 10,
                label: '三级 1-1-2',
              },
            ],
          },
        ],
      },
      {
        id: 2,
        label: '一级 2',
        children: [
          {
            id: 5,
            label: '二级 2-1',
          },
          {
            id: 6,
            label: '二级 2-2',
          },
        ],
      },
    ];

    const handleCheckChange = (data, checked, indeterminate) => {
      if (checked) {
        // 勾选父节点时，取消选中所有子节点
        // treeRef.value.setCheckedKeys([data.id], false); // 取消选中当前节点
        treeRef.value.setCheckedKeys([], false); // 取消选中所有节点
        treeRef.value.setChecked(data.id, true, false); // 重新选中当前节点
      }
    };

    return {
      data,
      treeRef,
      handleCheckChange,
    };
  },
};
</script>

<style scoped>
.home{
  margin-left: 200px;
}
</style>